<template>
    <view>
        <uv-popup ref="nicknamePopup" closeable round="1rem" :bgColor="blackxlight">
            <view class="h-72 px-4 py-10">
                <view class="flex flex-col w-full px-4 box-border">
                    <input v-model="nicknameForm.nickname"
                        class="text-whitex my-4 py-2 px-4 rounded-2xl text-sm bg-blackx" placeholder="输入新分身昵称"
                        :show-confirm-bar="false" />
                </view>
                <view class="w-full box-border px-8 mt-4">
                    <view class="bg-bluex text-whitex font-extrabold box-border rounded-full text-center p-2"
                        @click="setNickname">
                        保存昵称
                    </view>
                </view>
                <view
                    class="flex flex-wrap gap-2 gap-y-2 justify-start pb-4 px-4 mt-4 flex-1 overflow-scroll box-border">
                    <view @click="onChooseNickname(i)" class="text-whitex px-2 py-1 text-sm rounded-md"
                        :class="i.id==avatar_id?'bg-bluex':'bg-bluex/40'" v-for="i in avatar_list" :key="i.id">
                        {{i.nickname}}
                    </view>
                </view>
            </view>
        </uv-popup>
    </view>
</template>

<script>
    import {
        colors
    } from '../../consts/colors';
    import {
        avatarList,
        sensitive,
        setNickname
    } from '../../http/api';

    export default {
        name: "nicknamePopup",
        props: {
            avatar_id: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                blackxlight: colors.blackxlight,
                nicknameForm: {
                    nickname: '',
                },
                avatar_list: [],
            };
        },
        methods: {
            async getAvatarList() {
                const res = await avatarList()
                const data = res.data
                this.avatar_list = data.list
            },
            clearForm() {
                this.nicknameForm.nickname = ''
            },
            showNicknamePopup() {
                this.$refs.nicknamePopup.open("bottom")
                this.clearForm()
                this.getAvatarList()
            },
            open() {
                this.showNicknamePopup()
            },
            onChooseNickname(i) {
                this.$refs.nicknamePopup.close();
                this.$emit('onChooseNickname', i)
            },
            async testSensitive(question, scene_name) {
                const res = await sensitive({
                    question,
                    scene_name
                })
                if (res.Hit) {
                    uni.showToast({
                        icon: "none",
                        title: "此内容不适合发布",
                    })
                }
                return res.Hit
            },
            async setNickname() {
                uni.showLoading({
                    mask: true,
                    title: "提交中"
                })
                const hit = await this.testSensitive(this.nicknameForm.nickname, "userinfo")
                if (hit) {
                    this.nicknameForm.nickname = ""
                    uni.hideLoading()
                    return;
                }
                const res = await setNickname(this.nicknameForm)
                if (res.code == 0) {
                    uni.showToast({
                        icon: "none",
                        title: res.message,
                    })
                    return
                }
                uni.hideLoading()
                const data = res.data
                this.$refs.nicknamePopup.close()
                this.$emit('onChooseNickname', data)
            },
        }
    }
</script>

<style>

</style>